<template>
    <Header title="店铺"></Header>
    <div class="foodClassify">
        <div class="name">
            {{title}}
            <img class="store_img" :src="img" />
        </div>

        <div class="classify">
            <van-tabs>
                <van-tab v-for="(item,index) in storeData" :title="item.name">
                    <FoodList :foodData = "item.data"></FoodList>
                </van-tab>
            </van-tabs>
        </div>

    </div>
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" :badge="user.$state.cartList.length" @click="toCart"/>
        <!-- <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" /> -->
        <van-action-bar-button type="warning" text="加入购物车" @click="addToCart"/>
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>

<script setup>
    import Header from '@/components/Header.vue';
    import { useRoute } from 'vue-router';
    import { getStoreData } from '../../request/api'
    import { onMounted, reactive, toRefs } from 'vue';
    import FoodList from './FoodList.vue';
    import { userStore } from '@/store/UserStore';
    import { useRouter } from 'vue-router';


    const user = userStore()

    const route = useRoute()
    const router = useRouter()

    const data = reactive({
        storeData:[],
        title:'',
        img:''
    })

    const {storeData,title,img} = {...toRefs(data)}

    //请求店铺数据
    const getData = ()=>{
        getStoreData().then((res)=>{
            if(res.status == 200){
                res.data.stores.forEach((item)=>{
                    console.log("item:",item.title)
                    if(item.title == route.query.title){
                         title.value = item.title
                         img.value = item.img
                         storeData.value = item.storeData
                    }
                })
            }
        })
    }

    onMounted(()=>{
        getData()
       
    })


    const addToCart = ()=>{
        let newList = []
        storeData.value[0]?.data?.items?.forEach((item)=>{
            item.children.forEach((item2)=>{
                if(item2.num > 0){
                    newList.push(item2)
                }
            })
        })

        if(newList.length == 0){
            alert('请选择商品')
            return
        }


        user.addCart(newList)


    }

    const toCart = ()=>{
        router.push('./cart')
    }
    


</script>

<style lang="less">
    .foodClassify {
      height: 500px;
      background-color: #fff;
      margin-top: -20px;
      border-radius: 20px 20px 0 0;
      background-image: linear-gradient(#fff, #f5f5f5);

      .classify {
        margin-top: 10px;
      }
      .name {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        font-size: 18px;
        .store_img {
          width: 80px;
          height: 80px;
          border-radius: 10px;
          margin-top: -30px;
        }
      }
    }
</style>